<template>
  <el-anchor
    v-if="tableList.length > 1"
    direction="horizontal"
    :container="`.${containerClass} .scroll-container`"
    @click.prevent
  >
    <el-anchor-link v-for="item in tableList" :key="item.name" :href="`#${item.id}`">
      {{ item.name }}
    </el-anchor-link>
  </el-anchor>
  <PiCollapse
    class="scroll-container"
    :class="{ mt10: tableList.length < 2 }"
    :collapseList="tableList"
    v-model="activeNames"
  >
    <template #default="{ item }">
      <component :is="item.value"></component>
    </template>
  </PiCollapse>
</template>

<script setup name="PiAnchorPanel">
const { tableList, containerClass } = defineProps({
  //锚点列表
  tableList: {
    type: Array,
    required: true,
    default: () => [],
  },
  // 父容器的class，便于锚点基于指定的容器滚动
  containerClass: {
    type: String,
    default: '',
    required: true,
  },
});

const activeNames = computed(() => {
  return tableList.map((item) => item.name);
});
</script>

<style scoped lang="less">
.scroll-container {
  overflow: auto;
  height: calc(100% - 10px);
  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
  &:hover::-webkit-scrollbar-thumb {
    background-color: rgba(157, 165, 183, 0.4);
  }
}
</style>
